<template>
  <div>
    <button @click="getHtml">获取 html</button>
  </div>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onChange="handleChange"
      @onCreated="handleCreated"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
      style="height: 500px"
    />
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Boot } from '@wangeditor/editor';
import type {
  IEditorConfig,
  IToolbarConfig,
  IDomEditor,
} from '@wangeditor/editor';
import type { IRegisterMenuConf } from '@wangeditor/core';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

// 测试：注册 button menu
class MyButtonMenu {
  public title: string;
  public tag: string;
  constructor() {
    (this.title = 'menu1'), (this.tag = 'button');
  }
  getValue() {
    return '';
  }
  isActive() {
    return false;
  }
  isDisabled() {
    return false;
  }
  exec(editor: IDomEditor) {
    console.log(editor);
    alert('menu1 exec');
  }
}
const menuConf: IRegisterMenuConf = {
  key: 'my-menu-1', // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
  factory() {
    return new MyButtonMenu();
  },
};
Boot.registerMenu(menuConf);
console.log(1111111111);
// 编辑器实例，必须用 shallowRef ，重要！
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref<string>('<p>hello&nbsp;world</p>');
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    insertImage: {
      checkImage(src: string) {
        console.log('image src', src);
        if (src.indexOf('http') !== 0) {
          return '图片网址必须以 http/https 开头';
        }
        return true;
      },
    },
  },
};
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  // toolbarKeys: ['headerSelect', 'bold', 'my-menu-1'],
  // excludeKeys: [],
  insertKeys: {
    index: 0,
    keys: 'my-menu-1',
  },
};
// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
  console.log('created', editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
  // window.editor = editor // 临时测试使用，用完删除
};
const handleChange = (editor: IDomEditor) => {
  console.log('change:', editor.children);
};
const handleDestroyed = (editor: IDomEditor) => {
  console.log('destroyed', editor);
};
const handleFocus = (editor: IDomEditor) => {
  console.log('focus', editor);
};
const handleBlur = (editor: IDomEditor) => {
  console.log('blur', editor);
};
const customAlert = (info: string, type: string) => {
  alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (
  editor: IDomEditor,
  event: ClipboardEvent,
  callback: Function,
) => {
  console.log('ClipboardEvent 粘贴事件对象', event);
  // 自定义插入内容
  editor.insertText('xxx');
  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};
// 及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  // 销毁，并移除 editor
  editor.destroy();
});
const getHtml = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  console.log(editor.getHtml());
};
</script>
